<!--
 * @Author: your name
 * @Date: 2022-01-17 10:57:08
 * @LastEditTime: 2022-01-18 16:12:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \custom-app\src\modules\FormCenter\components\approvalNode\index.vue
-->
<template>
  <div
    class="flow-editor-node approval"
    :class="{
      'history-current-node': isCurrentNode,
      'history-approved-node': isApprovedNode
    }"
  >
    <div class="flow-editor-node-container">
      <div class="node-title">
        <div class="node-title-name">
          {{ nodeConfig.title || LANG.APPROVAL }}
        </div>
      </div>
      <div class="node-content node-content-placeholder">
        <div class="node-detail">
          <div class="node-detail-item">
            {{ getNodeApprovalType(nodeConfig.nodeConfig.approvalType) }}
          </div>
        </div>
        <i class="iconfont-approval-admin icon-arrow"></i>
      </div>
      <svg-icon
        v-if="!$attrs.diagramMode"
        class="delete-btn"
        icon-class="close"
      ></svg-icon>
    </div>
    <div class="bottom-v-line"></div>
  </div>
</template>

<script>
import { getNodeApprovalType } from '../../common/common'
export default {
  name: 'approvalNode',
  props: {
    nodeConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    node_index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      getNodeApprovalType: getNodeApprovalType,
      iscreateProcessForm:
        this.$route.path && this.$route.path.includes('createProcessForm')
    }
  },
  computed: {
    isCurrentNode() {
      if (this.$attrs.diagramMode) {
        return this.$attrs.flowInfo.currentNode.includes(this.nodeConfig.id)
      } else {
        return false
      }
    },
    isApprovedNode() {
      if (this.$attrs.diagramMode) {
        return this.$attrs.flowInfo.userTask.includes(this.nodeConfig.id)
      } else {
        return false
      }
    }
  }
}
</script>

<style></style>
